<template>
  <div class="container">
    <el-tabs
      v-model="curTab"
      class="demo-tabs"
      @tab-click="handleClick"
      style="background: #fff; padding: 0 20px"
    >
      <el-tab-pane v-for="item in tabList" :label="item" :name="item">
        <div>
          <template v-for="config in valueMap.get(item)">
            <el-form :model="config" label-width="120px" ref="tabForm">
              <el-form-item>
                <el-row :gutter="20">
                  <el-col :span="3">
                    <el-input
                      v-model="config.note"
                      label="note"
                      placeholder="请输入类型"
                    />
                  </el-col>
                  <el-col :span="4">
                    <el-input
                      v-model="config.params_name"
                      label="params_name"
                      placeholder="请输入name"
                    />
                  </el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="config.params_key"
                      label="key"
                      placeholder="请输入key"
                    />
                  </el-col>
                  <el-col v-if="config.note.includes('img')" :span="8">
                    <UploadImage
                      :limit="1"
                      v-model="config.params_value"
                      @change="validParams(config.params_key)"
                    />
                  </el-col>
                  <el-col v-else :span="config.note.includes('color') ? 6 : 8">
                    <el-input
                      v-model="config.params_value"
                      label="value"
                      placeholder="请输入value"
                    />
                  </el-col>
                  <el-col v-if="config.note.includes('color')" :span="2">
                    <el-color-picker v-model="config.params_value" />
                  </el-col>
                  <el-col :span="1" @click="handleOperate('复制', config)">
                    <el-button type="text">复制</el-button>
                  </el-col>
                  <el-col :span="1" @click="handleOperate('保存', config)" v-has="'sys-config-save'">
                    <el-button type="text">保存</el-button>
                  </el-col>
                  <el-col :span="2" @click="handleOperate('删除', config)" v-has="'sys-config-del'">
                    <el-button type="text">删除</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </template>
          <div class="mt-100">
            <el-button type="primary" class="mt-40" @click="addConfig(item)" v-has="'sys-config-add'"
              >新增</el-button
            >
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { configAdd, configDel, configEdit, getConfig } from "@/api/config";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";

import { useClipboard } from "@vueuse/core";
import UploadImage from "@/components/UploadImage.vue";
const { copy } = useClipboard();

const configList = ref<any>([]);
const tabList = ref<string[]>([]);
const valueMap = ref<Map<string, any[]>>(new Map());
const curTab = ref<string>("");

onMounted(() => {
  getConfigList();
});

const validParams = (key: string) => {
  console.log("校验:", key);
};

const getConfigList = async () => {
  const res = await getConfig({ page: 1, limit: 9999 });
  console.log("获取配置:", res);
  if (res && res.data.rows) {
    valueMap.value.clear();
    const list: any[] = res.data.rows;
    configList.value = list;
    tabList.value = Array.from(new Set(list.map((item) => item.channel_tag)));
    console.log("tabList", tabList.value);
    list.forEach((row) => {
      if (valueMap.value.get(row.channel_tag)) {
        valueMap.value.get(row.channel_tag)?.push(row);
      } else {
        let listTemp = [];
        listTemp.push(row);
        valueMap.value.set(row.channel_tag, listTemp);
      }
    });
    curTab.value = curTab.value ? curTab.value : tabList.value[0];
    console.log("valueMap", valueMap.value);
  }
};

const addConfig = (tag: string) => {
  let values: any[] = valueMap.value.get(tag) || [];
  const note = values[0].note;
  valueMap.value.get(tag)?.push({
    note: note,
    params_name: "",
    params_key: "",
    params_value: "",
    channel_tag: tag,
  });
};

const handleOperate = async (tag: string, config: any) => {
  console.log("操作：", tag, config);
  if (tag == "复制") {
    copy(config.params_value);
    ElMessage({ message: "复制成功", type: "success" });
  } else if (tag == "保存") {
    if (config.id) {
      await configEdit({ ...config });
    } else {
      await configAdd({ ...config });
    }
    getConfigList();
    ElMessage({ message: "保存成功", type: "success" });
  } else if (tag == "删除") {
    if (config.id) {
      await configDel({ id: config.id });
    }
    getConfigList();
    ElMessage({ message: "删除成功", type: "success" });
  }
};

const handleClick = () => {
  console.log("tab切换");
};
</script>

<style lang="scss" scoped></style>
